<!--
 * @Author: ChunLai
 * @Date: 2022-10-25 11:24:53
 * @LastEditTime: 2025-08-15 11:04:19
 * @Description: 投保须知(新版--综合)
 * @FilePath: \02.bldinsure\src\views\index\components\InsureNewerKnow.vue
-->
<template>
  <div class="insure_know">
    <div class="sy-mode-head">投保须知</div>
    <ul class="insure_desc" v-if="planModule">
      <li class="insure_desc-item" v-for="item in planModule" :key="item.label">
        <span class="insure_desc-label">{{ item.label }}</span>
        <span class="insure_desc-conts" v-html="item.value"></span>
      </li>
    </ul>
    <div class="insure_files" v-if="filterClause.length > 0">
      投保前请您认真阅读
      <span
        class="ftc4"
        v-for="(item, index) in filterClause"
        :key="`link${item.fileName}`"
        @click="goReadPage(item)"
      >
        {{ getFileName(item, index) }}
      </span>
      ，请重点关注保险责任、免责条款、犹豫期、等待期、退保等关键信息并确保已完全理解。
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "InsureNewerKnow",
  data() {
    return {};
  },
  components: {},
  computed: {
    ...mapGetters({
      planModule: "home/planModule",
      tabClauses: "page/tabClauses",
      comClauseList: "page/comClauseList",
      colligateFiles: "page/colligateFiles",
      apiClauseList: "home/apiClauseList",
    }),
    insureFilesList() {
      let res = [];
      if (this.comClauseList.length > 0) {
        res = [...this.comClauseList];
      }
      if (this.apiClauseList.length > 0) {
        res = [...res, ...this.apiClauseList];
      }
      return res;
    },
    colligateClause() {
      let res = this.colligateFiles.filter((ele) => {
        const fdEle = this.insureFilesList.find(
          (ins) => ins.fileName.indexOf(ele.keyword) !== -1
        );
        if (fdEle) {
          return ele;
        }
      });
      return res;
    },
    filterClause() {
      let res = [];
      this.insureFilesList.forEach((item) => {
        const fdEle = this.colligateFiles.find(
          (ele) => item.fileName.indexOf(ele.keyword) != -1
        );
        if (!fdEle) {
          res.push(item);
        }
      });
      if (this.colligateClause.length > 0) {
        res = [...this.colligateClause, ...res];
      }
      if (this.tabClauses.length > 0) {
        res = [...this.tabClauses, ...res];
      }
      // console.log(res);
      return res;
    },
    filesLen() {
      let res = 0;
      if (this.filterClause.length > 0) {
        res = this.filterClause.length;
      }
      return res;
    },
  },
  mounted() {
    // this.filterClause();
  },
  methods: {
    goReadPage(item) {
      if (item.keyword) {
        this.$router.push(`/colligate?type=${item.value}`);
        return;
      }
      if (!item.fileUrl) return this.$toast("未查询到文件");
      if (item.suffixType == "html") {
        this.$router.push(`/read?ftype=${item.suffixType}&fid=${item.id}`);
      } else {
        this.$router.push(`/read?ftype=${item.suffixType}&fid=${item.id}`);
      }
    },
    getFileName(item, index) {
      let res = "",
        symbol = "",
        name = `${item.fileName}`;
      if (index != this.filesLen - 1) {
        symbol = "、";
      }
      if (item.fileName.indexOf("《") == -1) {
        name = `《${item.fileName}》`;
      }
      res = `${name}${symbol}`;
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.insure_know {
  font-size: 15px;
  padding: 0 12px;
  background-color: #ffffff;
  .insure_desc {
    // padding: 0 12px;
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 9px 0;
      line-height: 20px;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 200%;
        height: 1px;
        background-color: #ebebeb;
        transform: scale(0.5);
        transform-origin: 0 0;
      }
    }
    &-conts {
      flex: 1;
      flex-shrink: 0;
      color: #747474;
      padding-left: 30px;
      text-align: right;
    }
    &-label {
      color: #343434;
    }
  }
  .insure_files {
    padding: 10px 0;
    font-size: 14px;
    line-height: 26px;
    color: #747474;
    .ftc4 {
      color: #e7a249;
    }
  }
}
</style>
